<template>
<div class="container">
    <p>{{hour}}&nbsp;<em>:</em></p>
    <p>{{minute}}&nbsp;<em>:</em></p>
    <p>{{second}}</p>
</div>
</template>

<script>
export default {
    name: "TimeCountdown",
    data() {
        return {
            time: "20000",
            second: 0,
            minute: 0,
            hour: 0,
        }
    },
    computed: {
        // xsecond() {
        //     return this.second;
        // },
        // xminute() {
        //     return this.minute;
        // },
        // xhour() {
        //     return this.hour;
        // }
    },
    methods: {

        // 将接口传入的秒转化为时分秒的形式
        coculcate(leftTime) {

            let time = parseInt(leftTime);
            let hour, minute, second;
            // 渲染初始的显示的数字
            hour = Math.floor(time / 3600); //一共多少小时
            hour > 99 ? hour = 99 : hour = hour;
            minute = Math.floor((time - hour * 3600) / 60) //一共多少分钟
            second = time - minute * 60 - hour * 3600;
            this.second = second;
            this.minute = minute;
            this.hour = hour;
            let timeCount = setInterval(() => {
                if (time == 0) {
                    this.second = 0;
                    this.minute = 0;
                    this.hour = 0;
                    clearInterval(timeCount);
                    // 下面最好写一次调用接口的方法，返回一个值

                } else {
                    time--;
                    hour = Math.floor(time / 3600); //一共多少小时
                    hour > 99 ? hour = 99 : hour = hour;
                    minute = Math.floor((time - hour * 3600) / 60) //一共多少分钟
                    second = time - minute * 60 - hour * 3600;
                    this.second = second;
                    this.minute = minute;
                    this.hour = hour;

                }
            }, 1000)
        },
    },
    mounted() {
        this.coculcate(this.time)
    },
    // props: {
    //     timeCountdown: Number,
    // },

    // watch: {},
    // computed: {
    //     // hour(){
    //     //     return {

    //     //     }
    //     // }
    // },
    // methods: {
    //     //将一个零变成两个零的方法，主要是为了格式话美观
    //     Beautify(x) {
    //         if (x.length < 2) {
    //             x = '0' + x;
    //             console.log("behavior")
    //         }
    //     },
    //     coculateTime: function () {
    //         console.log("ewerw");
    //         return;
    // let time = parseInt(this.time);
    // let timeCount = setInterval(function () {
    //     // time==0?clearInterval(timeCount):time=this.time-1;
    //     // return time;
    //     if (time == 0) {
    //         clearInterval(timeCount);
    //         // 下面最好写一次调用接口的方法，返回一个值
    //     } else {
    //         let minute = time / 60; //一共多少分钟
    //         let hour = time / 3600;
    //         this.second = time - minute * 60;
    //         this.minute = minute - hour * 60;
    //         this.hour = hour;
    //         return Beautify(this.second);
    //         Beautify(this.minute);
    //         Beautify(this.hour);
    //         this.time--;
    //     }
    // }, 1000)
    //     },
    // },
    // data() {
    //     return {
    //         time: '200',
    //         hour: '',
    //         minute: '',
    //         second: '',

    //     }
    // },
    // destroyed() {
    //     coculateTime();
    // },
    // // methods(){

    // // }
}
</script>

<style scoped>
.container {
    width: 100%;
    display: -webkit-flex;
    display: flex;
    align-items: flex-start;
    background-color: black;
    color: white;
    text-align: center;
    border-radius: .1rem;
    justify-content: center;
}

.container>p {
    min-width: 30%;
}
</style>
